<template>
  <div class="taiweihui-container">
    <Header />
    
    <div class="content-wrapper">
      <!-- 页面标题 -->
      <div class="page-header">
        <h2>台委会构成</h2>
        <p class="subtitle">广播台核心管理团队</p>
      </div>
      
      <!-- 构成说明 -->
      <div class="intro-card">
        <h3>台委会构成说明</h3>
        <div class="intro-content">
          <p>台委会作为广播台的核心决策机构，是社团发展的领航者与决策者。其成员由正式各部门部长及正式台长共同构成，肩负着引领社团发展的重要使命。</p>
          <p>台委会拥有台内事务的最高决策权、表决权和执行权，全面统领台内一切事务，负责制定社团的发展方向与战略定位。通过集体讨论与民主决策，确保广播台各项工作有序开展，不断提升社团影响力与凝聚力，为校园文化建设贡献力量。</p>
        </div>
      </div>
      
      <!-- 筛选与成员列表 -->
      <div class="members-section">
        <div class="filter-bar">
          <label for="session-select">选择届数：</label>
          <select id="session-select" v-model="selectedSession" @change="filterMembers">
            <option :value="session" v-for="session in sessions" :key="session">{{ session }}届</option>
          </select>
        </div>
        
        <div class="members-grid">
          <div class="member-card" v-for="member in filteredMembers" :key="member.id">
            <div class="member-avatar">
              <img :src="member.avatar" :alt="member.name">
            </div>
            <div class="member-info">
              <h4 class="member-name">{{ member.name }}</h4>
              <p class="member-position">{{ member.position }}</p>
              <p class="member-department">{{ member.department }}</p>
              <div class="member-bio">{{ member.bio }}</div>
            </div>
          </div>
        </div>
        
        <div class="empty-state" v-if="filteredMembers.length === 0">
          <i class="iconfont icon-empty"></i>
          <p>暂无该届台委会成员信息</p>
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import { ref, computed } from 'vue'

// 生成届数列表（从23届开始）
const currentYear = new Date().getFullYear()
const startSession = 23
const endSession = 25 // 可根据需要扩展
const sessions = ref(Array.from({length: endSession - startSession + 1}, (_, i) => startSession + i))

// 选中的届数
const selectedSession = ref(23)

// 台委会成员数据
const members = ref([
  {
    id: 1,
    session: 23,
    name: '张明',
    position: '台长',
    department: '全台',
    bio: '负责广播台全面工作，统筹各部门协调发展，制定年度工作计划与发展方向。',
    avatar: new URL('@/assets/members/zhangming.jpg', import.meta.url).href
  },
  {
    id: 2,
    session: 23,
    name: '李华',
    position: '副台长',
    department: '全台',
    bio: '协助台长管理日常事务，分管采播部与技术部工作，确保节目质量与技术支持。',
    avatar: new URL('@/assets/members/lihua.jpg', import.meta.url).href
  },
  {
    id: 3,
    session: 23,
    name: '王芳',
    position: '部长',
    department: '采播部',
    bio: '负责采播部日常管理，节目策划与制作，主持人培训与管理工作。',
    avatar: new URL('@/assets/members/wangfang.jpg', import.meta.url).href
  },
  {
    id: 4,
    session: 23,
    name: '赵强',
    position: '部长',
    department: '技术部',
    bio: '负责广播台设备维护与管理，活动技术支持，网站与系统维护。',
    avatar: new URL('@/assets/members/zhaoqiang.jpg', import.meta.url).href
  },
  {
    id: 5,
    session: 24,
    name: '陈静',
    position: '台长',
    department: '全台',
    bio: '曾任技术部部长，致力于推动广播台数字化转型与新媒体发展。',
    avatar: new URL('@/assets/members/chenjing.jpg', import.meta.url).href
  },
  {
    id: 6,
    session: 24,
    name: '刘强',
    position: '部长',
    department: '办公室',
    bio: '负责社团行政事务管理，财务统筹，档案整理与活动协调。',
    avatar: new URL('@/assets/members/liuqiang.jpg', import.meta.url).href
  }
])

// 筛选成员
const filteredMembers = computed(() => {
  return members.value.filter(member => member.session === selectedSession.value)
})

// 切换筛选
const filterMembers = () => {
  // 可在此处添加加载对应届数数据的逻辑
}
</script>

<style scoped>
.taiweihui-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  color: #333;
}

.content-wrapper {
  flex: 1;
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 20px;
}

/* 页面标题样式 */
.page-header {
  text-align: center;
  margin-bottom: 50px;
  padding-bottom: 20px;
  position: relative;
}

.page-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 2px;
}

.page-header h2 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 10px;
}

.subtitle {
  color: #7f8c8d;
  font-size: 1.1rem;
}

/* 说明卡片样式 */
.intro-card {
  background-color: white;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 40px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05);
  border-left: 4px solid #3498db;
}

.intro-card h3 {
  font-size: 1.5rem;
  color: #2c3e50;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.intro-card h3::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background-color: #3498db;
  margin-right: 10px;
  border-radius: 2px;
}

.intro-content p {
  line-height: 1.8;
  color: #555;
  margin-bottom: 15px;
  text-align: justify;
}

/* 成员列表样式 */
.members-section {
  margin-top: 30px;
}

.filter-bar {
  background-color: white;
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.filter-bar label {
  margin-right: 15px;
  color: #34495e;
  font-weight: 500;
}

.filter-bar select {
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  font-size: 1rem;
  cursor: pointer;
}

.members-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 25px;
}

.member-card {
  background-color: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  flex-direction: column;
}

.member-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

.member-avatar {
  background-color: #f1f5f9;
  padding: 20px;
  text-align: center;
}

.member-avatar img {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 5px solid white;
  box-shadow: 0 3px 10px rgba(0,0,0,0.1);
}

.member-info {
  padding: 25px 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.member-name {
  font-size: 1.3rem;
  color: #2c3e50;
  margin-bottom: 5px;
  text-align: center;
}

.member-position {
  color: #e74c3c;
  font-weight: 500;
  text-align: center;
  margin-bottom: 10px;
  font-size: 0.95rem;
}

.member-department {
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9rem;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px dashed #eee;
}

.member-bio {
  color: #555;
  line-height: 1.6;
  font-size: 0.95rem;
  flex: 1;
}

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: #7f8c8d;
  background-color: white;
  border-radius: 10px;
  margin-top: 20px;
}

.empty-state i {
  font-size: 4rem;
  margin-bottom: 20px;
  color: #bdc3c7;
}

@media (max-width: 768px) {
  .members-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  
  .page-header h2 {
    font-size: 1.8rem;
  }
  
  .intro-card {
    padding: 20px;
  }
}
</style>